---
title: "Display"
description: "控制元素显示类型的功能类"
---

import plugin from 'tailwindcss/lib/plugins/display'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Block -->
## Block

<!-- Use `block` to create a block-level element. -->
使用 `block` 创建一个块级元素。

```html lightBlue
<template preview>
  <div class="p-4 space-y-4 bg-light-blue-300 bg-stripes bg-stripes-white rounded-md">
    <span class="block rounded-md text-white font-extrabold text-center bg-light-blue-500 p-6">1</span>
    <span class="block rounded-md text-white font-extrabold text-center bg-light-blue-500 p-6">2</span>
    <span class="block rounded-md text-white font-extrabold text-center bg-light-blue-500 p-6">3</span>
  </div>
</template>

<div class="space-y-4 ...">
  <span class="**block** ...">1</span>
  <span class="**block** ...">2</span>
  <span class="**block** ...">3</span>
</div>
```

## Flow-Root

<!-- Use `flow-root` to create a block-level element with its own [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context). -->
使用 `flow-root` 创建一个有自己的 [block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) 的块级元素。

```html purple
<template preview>
  <div class="space-y-4">
    <div class="flow-root bg-purple-300 bg-stripes bg-stripes-white rounded-md">
      <div class="my-4 text-white font-extrabold text-center bg-purple-500 p-6">1</div>
    </div>
    <div class="flow-root bg-purple-300 bg-stripes bg-stripes-white rounded-md">
      <div class="my-4 text-white font-extrabold text-center bg-purple-500 p-6">2</div>
    </div>
  </div>
</template>

<div class="space-y-4">
  <div class="**flow-root** ...">
    <div class="my-4 ...">1</div>
  </div>
  <div class="**flow-root** ...">
    <div class="my-4 ...">2</div>
  </div>
</div>
```

## Inline Block

<!-- Use `inline-block` to create an inline block-level element. -->
使用 `inline-block` 创建一个内联块级元素。

```html rose
<template preview>
  <div class="p-4 space-x-4 bg-rose-300 bg-stripes bg-stripes-white rounded-md">
    <div class="inline-block rounded-md text-white font-extrabold text-center bg-rose-500 px-6 py-4">1</div>
    <div class="inline-block rounded-md text-white font-extrabold text-center bg-rose-500 px-6 py-4">2</div>
    <div class="inline-block rounded-md text-white font-extrabold text-center bg-rose-500 px-6 py-4">3</div>
  </div>
</template>

<div class="space-x-4 ...">
  <div class="**inline-block** ...">1</div>
  <div class="**inline-block** ...">2</div>
  <div class="**inline-block** ...">3</div>
</div>
```

## Inline

<!-- Use `inline` to create an inline element. -->
使用  `inline` 创建一个内联元素。

```html amber
<template preview>
  <div class="bg-amber-300 bg-stripes bg-stripes-white rounded-md space-x-3">
    <div class="inline rounded-md text-white font-extrabold text-center bg-amber-500 px-6 py-4">1</div>
    <div class="inline rounded-md text-white font-extrabold text-center bg-amber-500 px-6 py-4">2</div>
    <div class="inline rounded-md text-white font-extrabold text-center bg-amber-500 px-6 py-4">3</div>
  </div>
</template>

<div>
  <div class="inline ...">1</div>
  <div class="inline ...">2</div>
  <div class="inline ...">3</div>
</div>
```

## Flex

<!-- Use `flex` to create a block-level flex container. -->
使用 `flex` 来创建一个块级的 flex 容器。

```html emerald
<template preview>
  <div class="p-4 flex space-x-4 bg-emerald-300 bg-stripes bg-stripes-white rounded-md">
    <div class="flex-1 rounded-md text-white font-extrabold text-center bg-emerald-500 p-6">1</div>
    <div class="flex-1 rounded-md text-white font-extrabold text-center bg-emerald-500 p-6">2</div>
    <div class="flex-1 rounded-md text-white font-extrabold text-center bg-emerald-500 p-6">3</div>
  </div>
</template>

<div class="**flex** space-x-4 ...">
  <div class="flex-1 ...">1</div>
  <div class="flex-1 ...">2</div>
  <div class="flex-1 ...">3</div>
</div>
```

## Inline flex

<!-- Use `inline-flex` to create an inline flex container. -->
使用 `inline-flex` 来创建一个内联的 flex 容器。

```html indigo
<template preview>
  <div class="p-4 inline-flex space-x-4 bg-indigo-300 bg-stripes bg-stripes-white rounded-md">
    <div class="flex-1 rounded-md text-white font-extrabold text-center bg-indigo-500 px-6 py-4">1</div>
    <div class="flex-1 rounded-md text-white font-extrabold text-center bg-indigo-500 px-6 py-4">2</div>
    <div class="flex-1 rounded-md text-white font-extrabold text-center bg-indigo-500 px-6 py-4">3</div>
  </div>
</template>

<div class="**inline-flex** space-x-4 ...">
  <div class="flex-1 ...">1</div>
  <div class="flex-1 ...">2</div>
  <div class="flex-1 ...">3</div>
</div>
```

## Grid

<!-- Use `grid` to create a grid container. -->
使用 `grid` 来创建一个 grid 容器。

```html fuchsia
<template preview>
  <div class="p-4 grid gap-4 grid-cols-3 bg-fuchsia-300 bg-stripes bg-stripes-white rounded-md">
    <div class="bg-fuchsia-400 rounded-md h-12"></div>
    <div class="bg-fuchsia-500 rounded-md h-12"></div>
    <div class="bg-fuchsia-400 rounded-md h-12"></div>
    <div class="bg-fuchsia-500 rounded-md h-12"></div>
    <div class="bg-fuchsia-400 rounded-md h-12"></div>
    <div class="bg-fuchsia-500 rounded-md h-12"></div>
    <div class="bg-fuchsia-400 rounded-md h-12"></div>
    <div class="bg-fuchsia-500 rounded-md h-12"></div>
    <div class="bg-fuchsia-400 rounded-md h-12"></div>
  </div>
</template>

<div class="**grid** gap-4 grid-cols-3">
  <!-- ... -->
</div>
```

## Inline Grid

<!-- Use `inline-grid` to create an inline grid container. -->
使用 `inline-grid` 创建内联 grid 容器。

```html lightBlue
<template preview class="p-10 space-x-3">
  <span class="inline-grid grid-cols-3 gap-x-4 p-4 bg-light-blue-300 bg-stripes bg-stripes-white rounded-md">
    <span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">1</span>
    <span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">1</span>
    <span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">1</span>
  </span>
  <span class="inline-grid grid-cols-3 gap-x-4 p-4 bg-light-blue-300 bg-stripes bg-stripes-white rounded-md">
    <span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">2</span>
    <span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">2</span>
    <span class="text-white rounded-md font-extrabold text-center bg-light-blue-500 px-6 py-4">2</span>
  </span>
</template>

<span class="**inline-grid** grid-cols-3 gap-x-4">
  <span>1</span>
  <span>1</span>
  <span>1</span>
</span>
<span class="**inline-grid** grid-cols-3 gap-x-4">
  <span>2</span>
  <span>2</span>
  <span>2</span>
</span>
```

## Contents

<!-- Use `contents` to create a "phantom" container whose children act like direct children of the parent.. -->
使用 `contents` 创建一个 "phantom" 容器，它的子代就像父代的直接子代一样。

```html purple
<template preview>
  <div class="flex bg-purple-300 bg-stripes bg-stripes-white rounded-md">
    <div class="flex-1 rounded-md m-2 text-white font-extrabold text-center bg-purple-500 px-6 py-4">1</div>
    <div class="contents">
      <div class="flex-1 rounded-md m-2 text-white font-extrabold text-center bg-purple-500 px-6 py-4">2</div>
      <div class="flex-1 rounded-md m-2 text-white font-extrabold text-center bg-purple-500 px-6 py-4">3</div>
    </div>
    <div class="flex-1 rounded-md m-2 text-white font-extrabold text-center bg-purple-500 px-6 py-4">4</div>
  </div>
</template>

<div class="flex ...">
  <div class="flex-1 ...">1</div>
  <div class="contents">
    <div class="flex-1 ...">2</div>
    <div class="flex-1 ...">3</div>
  </div>
  <div class="flex-1 ...">4</div>
</div>
```

## Table

<!-- Use the `table`, `.table-row`, `.table-cell`, `.table-caption`, `.table-column`, `.table-column-group`, `.table-header-group`, `table-row-group`, and `.table-footer-group` utilities to create elements that behave like their respective table elements. -->
使用 `table`, `.table-row`, `.table-cell`, `.table-caption`, `.table-column`, `.table-column-group`, `.table-header-group`, `table-row-group`, 和 `.table-footer-group` 功能创建与其对应的表元素一样的元素。

```html rose
<template preview>
  <div class="table w-full bg-rose-300 bg-stripes bg-stripes-white rounded-md overflow-hidden">
    <div class="table-row-group">
      <div class="table-row">
        <div class="table-cell text-white font-extrabold text-center bg-rose-500 px-6 py-4">A cell with more content</div>
        <div class="table-cell text-white font-extrabold text-center bg-rose-400 px-6 py-4">Cell 2</div>
        <div class="table-cell text-white font-extrabold text-center bg-rose-500 px-6 py-4">Cell 3</div>
      </div>
      <div class="table-row">
        <div class="table-cell text-white font-extrabold text-center bg-rose-400 px-6 py-4">Cell 4</div>
        <div class="table-cell text-white font-extrabold text-center bg-rose-500 px-6 py-4">A cell with more content</div>
        <div class="table-cell text-white font-extrabold text-center bg-rose-400 px-6 py-4">Cell 6</div>
      </div>
    </div>
  </div>
</template>

<div class="**table** w-full ...">
  <div class="**table-row-group**">
    <div class="**table-row**">
      <div class="**table-cell** ...">A cell with more content</div>
      <div class="**table-cell** ...">Cell 2</div>
      <div class="**table-cell** ...">Cell 3</div>
    </div>
    <div class="**table-row**">
      <div class="**table-cell** ...">Cell 4</div>
      <div class="**table-cell** ...">A cell with more content</div>
      <div class="**table-cell** ...">Cell 6</div>
    </div>
  </div>
</div>
```

## Hidden

<!-- Use `hidden` to set an element to `display: none` and remove it from the page layout (compare with `.invisible` from the [visibility](/docs/visibility#invisible) documentation). -->
使用  `hidden` 设置一个元素为 `display: none`，并从页面布局中移除(对比 [visibility](/docs/visibility#invisible) 文档的 `.invisible`)。

```html amber
<template preview>
  <div class="p-4 flex space-x-4 bg-amber-300 bg-stripes bg-stripes-white rounded-md">
    <div class="hidden text-white rounded-md font-extrabold text-center bg-amber-500 px-6 py-4" hidden>1</div>
    <div class="text-white rounded-md font-extrabold text-center bg-amber-500 px-6 py-4">2</div>
    <div class="text-white rounded-md font-extrabold text-center bg-amber-500 px-6 py-4">3</div>
  </div>
</template>

<div class="flex ...">
  <div class="**hidden** ...">1</div>
  <div>2</div>
  <div>3</div>
</div>
```

## 响应式

<!-- To control the display property of an element at a specific breakpoint, add a `{screen}:` prefix to any existing display utility class. For example, use `md:inline-flex` to apply the `inline-flex` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的显示属性，请在任何现有的显示功能类中添加 `{screen}:` 前缀。例如，使用 `md:inline-flex` 给中等尺寸及以上的屏幕应用 `inline-flex` 功能。

```html
<div class="flex **md:inline-flex** ...">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

## 定制

### Variants

<Variants plugin="display" />

### Disabling

<Disabling plugin="display" />
